<template>
    <div class="body">
      <p class="pinjia_title common_bg_fff">
        <i class="iconfont icon-pingjia font_333_36"></i>
        <span class="font_333_36">客户评价</span>
      </p>
      <ul class="start_box common_bg_fff">
        <li>
          <span class="font_555_34">服务态度</span>
          <ul class="start">
            <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=fuwu_startN}" @click="start(n,0)"></li>
          </ul>
          <span class="font_333_36">{{fuwu_startN}}.0</span>
        </li>
        <li>
          <span class="font_555_34">称重准确</span>
          <ul class="start">
            <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=zhongliang_startN}" @click="start(n,1)"></li>
          </ul>
          <span class="font_333_36">{{zhongliang_startN}}.0</span>
        </li>
        <li>
          <span class="font_555_34">时间准时</span>
          <ul class="start">
            <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=time_startN}" @click="start(n,2)"></li>
          </ul>
          <span class="font_333_36">{{time_startN}}.0</span>
        </li>
        <li>
          <span class="font_555_34">操作专业</span>
          <ul class="start">
            <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=zhuanye_startN}" @click="start(n,3)"></li>
          </ul>
          <span class="font_333_36">{{zhuanye_startN}}.0</span>
        </li>
      </ul>

      <div class="contentbox common_bg_fff">
        <textarea placeholder="说说你的想法" v-model="content" class="font_333_30"></textarea>
      </div>


      <div class="btn font_fff_36" @click="linkTOdetail">提交</div>

      <toast v-model="showPositionValue" type="text" :time="1500" is-show-mask :text="showPositionValueTEXT" position="middle"></toast>
    </div>
</template>

<script>
import { Toast } from 'vux'
    export default {
        name: '',
        components: {
          Toast
        },
        data() {
            return {
              title:'评价',
              order_id:null,
              fuwu_startN:5,
              zhongliang_startN:5,
              time_startN:5,
              zhuanye_startN:5,
              content:'',
              showPositionValueTEXT:'',
              showPositionValue:false
            }
        },
        created () {
          this.setTitle(this.title)
        },
        mounted: function () {
          this.order_id = this.$route.params.id
        },
        methods: {
          linkTOdetail(){
            let arr = [this.fuwu_startN,this.zhongliang_startN,this.time_startN,this.zhuanye_startN]
            if(arr.some((i)=>{i <= 0})){
              this.showPositionValue = true
              this.showPositionValueTEXT = '请打分'
              return
            }
            this.axios.post('/home/Order/judgeOrder',{
              token:this.$store.state.token,
              order_id:this.order_id,
//              score:this.startN,
              service_score:this.fuwu_startN,
              weigh_score:this.zhongliang_startN,
              time_score:this.time_startN,
              operation_score:this.zhuanye_startN,
              content:this.content,
            }).then((res)=>{
                if(res.data.code==200){
                  this.$router.push('/order/pinjiaSuccess')
                }
            })
          },
          start(n,type){
            switch(type){
              case 0:
                this.fuwu_startN = n;
                break;
              case 1:
                this.zhongliang_startN = n;
                break;
              case 2:
                this.time_startN = n;
                break;
              case 3:
                this.zhuanye_startN = n;
                break;
            }
          }
        }
    }
</script>

<style scoped>
  @import "../../assets/public.css";
  .body{
    height: 100vh;
    /*background-color: #fff!important;*/
    padding-top:.27rem
  }
  .pinjia_title{
    padding:.3rem;
    /*margin-top:.2rem;*/
  }
  .pinjia_title>i{
    margin-right:.2rem;
  }
  .start_box{
    padding-left:.3rem;
    padding-bottom:.3rem;
  }
  .start_box>li{
    display: flex;
    align-items: center;
    height:.8rem;
  }
  .start{
    display: flex;
    align-items: center;
    margin-left:.8rem;
    margin-right:.6rem;
    /*justify-content: center;*/
    /*margin:.5rem auto .27rem;*/
    /*padding:;*/
  }
  .start>li{
    margin-right:.2rem;
    width:.36rem;
    height:.34rem;
    background-image: url("img/xing_an.png");
  }
  .start>li.active{
    background-image: url("img/xing_liang.png");
  }
  .contentbox{
    margin-top:.2rem;
    padding:.5rem 0;
    margin-bottom:.5rem;
  }
  .contentbox>textarea{
    width:6.50rem;
    height:3.44rem;
    border:1px solid #ddd;
    padding: .28rem .2rem;
    margin:0 auto;
    display: block;
  }
  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999;
    font-size:.30rem;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    font-size:.30rem;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;font-size:.30rem;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #999;font-size:.30rem;
  }
  .btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: 0 auto;
    border-radius: 5px;
  }
</style>
